{% extends "backend/base.html" %}

{% block title %}Member Predictions{% endblock %}

{% block head_css %}
<style type="text/css">
    .form-inline {
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block head_script %}
<script type="text/javascript" src="/static/js/chart-commons.js"></script>
<script type="text/javascript" src="/static/js/pred-member.js"></script>
{% endblock %}

{% block main_content %}
<div class="row">
    <div class="span2">
        <div class="well" style="padding: 8px 0;">
            <ul class="nav nav-list">
                <li class="nav-header">Statistics</li>
                <li>
                    <a href="/backend/stat/member">Members</a>
                </li>
                <li>
                    <a href="/backend/stat/sale">Sales</a>
                </li>
                <li>
                    <a href="/backend/stat/product">Products</a>
                </li>
                <li class="nav-header">Prediction</li>
                <li>
                    <a href="/backend/pred/product">Products</a>
                </li>
                <li class="active">
                    <a href="/backend/pred/member">Members</a>
                </li>
                <li class="nav-header">Planning</li>
                <li>
                    <a href="/backend/plan/weekly">Weekly Plan</a>
                </li>
                <li>
                    <a href="/backend/plan/daily">Daily Plan</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="span10">
        <div class="well">
            <h2>Member Predictions</h2>
            <p>Enter member name for analysis:</p>
            <div class="form-inline form-horizontal">
                <input type="text" class="span3" data-items="3" data-provide="typeahead" />
                <button class="btn btn-primary" id="analyze">Analyze</button>
            </div>
            <div class="row-fluid">
                <div class="span6">
                    <div class="favorite alert alert-info" style="display: none;">
                        <p>This member's favorite product is <strong class="product"></strong>.</p>
                        <p>This member's favorite category is <strong class="category"></strong>.</p>
                    </div>
                </div>
                <div class="span6">
                    <div style="display:none;" class="analysis alert">
                        <strong></strong>
                        <span></span>
                    </div>
                </div>
            </div>
            <div id="chart"></div>
        </div>
    </div>
</div>
{% endblock %}
